<html>
    <body>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <form class="cmxform" id="signupForm" method="get" action="">
              <p>
                <label for="username">用户名</label>
                <input id="username" name="username" type="text" placeholder="请输入用户名">
              </p>
              <p>
                <label for="password">密码</label>
                <input id="password" name="password" type="password" placeholder="">
              </p>
              <p>
                <label for="confirm_password">验证密码</label>
                <input id="confirm_password" name="confirm_password" type="password" placeholder="再次输入密码">
              </p>
              <input class="submit" type="button" onclick="loadXMLDoc()" value="提交">
        </form>
        <script>
            function loadXMLDoc(){
            var xhr = new XMLHttpRequest();
            var url = "https://9a495131-c039-4c5d-ad92-e9f744394ca9.mock.pstmn.io/hasName";
            url +="?name="+username.value;

            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status ==200){
                    var result = xhr.responseText;

                    if(result == "yes"){
                        document.getElementById("username").nextSibling.innerHTML = "用户名已存在";
                    }else{
                        document.getElementById("username").nextSibling.innerHTML = "ok";
                    }
                }
            };
        }
        </script>
    </body>
</html>